<template>
  <div class="TabControl">
    <ul class="nav">
      <li
        v-for="(item, index) in selections"
        class="nav-item"
        :class="{active: index == currentIndex}"
        @click="itemClick(index)"
      >
        <a href="javascript:;">
          <i :class="item.icon"></i>
          {{item.name}}
        </a>
      </li>
    </ul>
  </div>
</template>

<script>
export default {
  name: 'TabControl',
  props: {
    selections: {
      type: Object,
      default() {
        return {};
      },
    },
  },
  data() {
    return {
      currentIndex: 0,
    };
  },
  methods: {
    itemClick(index) {
      this.currentIndex = index;
      this.$emit('tabClick', index);
    },
  },
};
</script>

<style scoped>
.nav {
  margin-top: 10px;
  padding: 12px 0;
}
.nav .nav-item {
  position: relative;
  height: 54px;
  line-height: 54px;
  color: #474c59;
}
.nav .nav-item a {
  display: inline-block;
  width: 100%;
  padding-left: 47px;
}
.nav .nav-item i {
  display: inline-block;
  width: 24px;
  height: 24px;
  vertical-align: middle;
  margin-top: -2px;
  margin-right: 6px;
  background: url(/src/assets/image/CourseMenu/nav_sprite.png) no-repeat 0 0;
  background-size: 1600%;
}
.nav .nav-item .work {
  background-position: -144px 0;
}
.nav .nav-item .cexam {
  background-position: -168px 0;
}
.nav .nav-item .record {
  background-position: -360px 0;
}

/* active 状态 */
.nav .active a {
  color: #3b90ff;
  background-color: #f0f6ff;
}
.nav .active .task {
  background-position: 0 -24px;
}
.nav .active .work {
  background-position: -144px -24px;
}
.nav .active .cexam {
  background-position: -168px -24px;
}
.nav .active .record {
  background-position: -360px -24px;
}
</style>